<template>
  <div class="start-btn-container">
    <el-button class="open-login-btn" type="primary" @click="handleClick"
      >开始答题</el-button
    >
    <el-dialog
      v-model="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      class="login-dialog"
      align-center
      append-to-body
    >
      <div class="login-card">
        <div class="login-title">广发爱学人才测评系统</div>
        <div class="login-subtitle">Login your account</div>
        <el-form
          :model="form"
          label-width="48px"
          class="login-form"
          @submit.prevent
        >
          <el-form-item label="账号">
            <el-select
              v-model="form.employeeId"
              placeholder="请选择账号"
              style="width: 100%"
            >
              <el-option
                v-for="item in employeeList"
                :key="item.employeeId"
                :label="item.phone || item.name"
                :value="item.employeeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              style="width: 100%"
            />
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          class="login-btn"
          :disabled="!form.employeeId || !form.password"
          @click="login"
          >登录</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getEmployeeList } from "@/api/api";

const router = useRouter();
const store = useStore();
const dialogVisible = ref(false);
const employeeList = ref([]);
const form = ref({
  employeeId: "",
  password: "",
});

onMounted(async () => {
  try {
    const res = await getEmployeeList();
    employeeList.value = res.data.data || [];
  } catch (error) {
    employeeList.value = [];
  }
});

function login() {
  if (!form.value.employeeId || !form.value.password) return;
  dialogVisible.value = false;
  store.commit("setEmployeeId", form.value.employeeId);
  router.push("/test");
}

function handleClick() {
  console.log("按钮被点击了");
  dialogVisible.value = true;
  console.log("dialogVisible:", dialogVisible.value);
}

// 暴露方法给父组件
defineExpose({
  handleClick,
});
</script>

<style scoped>
/* 让按钮位置固定于视口，且大小使用固定像素避免随根字体缩放 */
.start-btn-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  /* 容器自身无需可见尺寸 */
}
.open-login-btn {
  position: absolute;
  top: 32px;
  right: 88px;
  z-index: 200;
  font-size: 16px;
  padding: 8px 24px;
  background: #2468f2;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 rgba(36, 104, 242, 0.08);
  cursor: pointer;
  transition: background 0.2s;
  /* 确保按钮相对于伪元素定位 */
  transform: translateZ(0);
}
.open-login-btn:hover {
  background: #174bb5;
}
.login-dialog .el-dialog__body {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
  padding: 20px 32px 32px 32px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}
.login-card {
  padding: 10px 32px 22px 32px;
}
.login-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  color: #222;
}
.login-subtitle {
  font-size: 15px;
  color: #888;
  text-align: center;
  margin-bottom: 32px;
}
.login-form {
  width: 100%;
  margin-bottom: 24px;
}
.login-form .el-form-item {
  margin-bottom: 18px;
}
.login-btn {
  width: 100%;
  height: 44px;
  border-radius: 24px;
  background: linear-gradient(90deg, #4f8aff 0%, #2e6cf6 100%);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 8px;
  box-shadow: 0 2px 8px 0 rgba(36, 104, 242, 0.08);
  border: none;
  z-index: 100;
}
.login-btn:disabled {
  background: #b3c6f7;
  color: #fff;
  cursor: not-allowed;
}
</style>
